<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1_固定定位广告条</title>
    <style>
        .top{
            height: 120px;
            background-color: #5AA4AE;
            color: #fff;
            font-size: 30px;
            /*使用固定定位 让广告条紧贴html*/
            position: fixed;
            top: 0;
            /*设置宽度为视口(viewport width)宽度的100%*/
            width: 100vw;
        }
        .left,.right{
            width: 60px;
            height: 200px;
            position: fixed;
            top: 300px;
        }
        .left{
            background-color: #FFF799;
            left: 20px;
        }
        .right{
            background-color: #F35336;
            right: 20px;
        }
        .main{
            /*让内容向下一点 不然会遮住部分文字*/
            margin-top: 130px;
        }
    </style>
</head>
<body>
<div class="top">我是顶部的广告条</div>
<div class="left">我是左侧的广告条</div>
<div class="right">我是右侧的广告条</div>
<div class="main">我是内容</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias atque delectus distinctio eius esse hic, ipsa
    itaque libero neque, nulla numquam possimus quasi quo recusandae repellendus sit vitae. Beatae, impedit!
</div>
<div>Consequatur cupiditate eos error fugit hic magnam nostrum repudiandae! Debitis molestias, placeat. Delectus eaque
    eum libero perspiciatis. Culpa cumque, ex fuga, illum molestiae, possimus quo quod reprehenderit sunt vel vitae!
</div>
<div>Aperiam eos esse officiis. A accusantium aspernatur, aut commodi cumque deleniti dignissimos ducimus eaque eligendi
    est fugit itaque magnam molestiae nesciunt nulla, numquam omnis optio quas quisquam sequi, vel vero.
</div>
<div>Aliquid consequuntur dolorum eligendi incidunt nostrum officia pariatur? Asperiores consequatur in molestiae nobis!
    Accusamus aut, consequuntur culpa cumque impedit, in itaque, laboriosam natus non optio reiciendis repudiandae
    suscipit ullam vitae?
</div>
<div>Libero pariatur porro quis repellendus? A architecto blanditiis, commodi consequatur enim esse expedita laborum
    mollitia nam quae quas quidem quo rem repellendus repudiandae rerum sint soluta tempora tempore velit! Quod?
</div>
<div>Aperiam at aut corporis dolor dolorem dolorum earum eius explicabo id illum impedit in magnam nesciunt nobis
    nostrum omnis perferendis porro praesentium quae, quaerat repellendus sequi sit sunt temporibus unde?
</div>
<div>Nemo, quas rem. Accusantium atque blanditiis culpa dolores et eveniet explicabo fugiat impedit iure, non quaerat,
    qui, quisquam rem similique veniam! Distinctio incidunt laudantium nesciunt porro quis rem saepe sed?
</div>
<div>A amet deserunt eius eveniet ex excepturi illum nam, reprehenderit repudiandae sint. Delectus earum incidunt natus
    omnis, perferendis repellendus vel? A consequuntur culpa enim eos id minima placeat sed voluptates!
</div>
<div>Amet aspernatur assumenda dolorem est exercitationem facilis fuga id, laboriosam modi non numquam, pariatur quia
    ratione! Aliquid consequuntur, dicta enim, eos expedita ipsam laboriosam neque nesciunt nobis quia, soluta
    temporibus?
</div>
<div>A aliquam asperiores aut, deserunt dicta, eius illum minima molestiae obcaecati provident quas qui quo rem sapiente
    velit. Enim eos excepturi facilis iusto? Dignissimos doloremque optio ratione vero voluptas voluptatum!
</div>
<div>Ab assumenda consectetur consequuntur cumque dolore dolores ducimus ea eaque fugiat iure laboriosam laborum
    molestias quis quisquam saepe sequi tempore, totam, veritatis vitae voluptatem. A molestias nisi ullam unde
    voluptatem?
</div>
<div>Adipisci quaerat rem repudiandae. Aperiam cupiditate doloribus ex, explicabo facere laborum laudantium minima,
    minus, nihil nisi pariatur possimus quidem quod quos repellat reprehenderit soluta sunt totam vero voluptatibus?
    Consequuntur, voluptas!
</div>
<div>Aliquam, architecto corporis dolore eaque est eum eveniet nihil obcaecati, odit optio pariatur possimus tempore ut
    voluptate, voluptatibus! At beatae error, excepturi ipsa iste itaque nostrum odio odit quos repellat!
</div>
<div>Accusamus aperiam assumenda blanditiis distinctio earum in inventore ipsum, iure magnam minus perspiciatis rerum
    soluta, totam ullam vel vitae voluptatem. Ducimus eum explicabo facilis similique temporibus. Inventore nobis
    perspiciatis repellendus!
</div>
<div>Aliquam architecto asperiores aut ducimus eum ex explicabo facilis incidunt ipsam laborum laudantium molestias nam
    nisi nobis, praesentium quisquam, sunt suscipit, voluptate! Ad amet atque eum fuga ipsa mollitia quod!
</div>
<div>Assumenda culpa deleniti est minima obcaecati porro quas soluta, sunt? Alias amet beatae dicta dolorum enim eveniet
    fuga impedit, magnam nihil numquam odio pariatur placeat porro quibusdam quisquam suscipit, voluptatem.
</div>
<div>Aliquam, assumenda corporis dolores dolorum enim est eveniet incidunt itaque mollitia nam nemo nihil, nisi odio
    officiis pariatur quas quibusdam repellat repudiandae rerum vitae! Ducimus eaque magni maiores quasi totam.
</div>
<div>Delectus distinctio est maxime minus mollitia obcaecati quibusdam sit velit! A dolorem iusto laborum magnam neque
    quod, repellendus reprehenderit saepe. Aperiam blanditiis cum est illo iure laudantium quo, repudiandae vero.
</div>
<div>Alias aliquid architecto commodi deleniti dolor earum eius est ipsam ipsum libero minus molestiae molestias nam
    nemo nulla officia perspiciatis quaerat, quod repudiandae sequi similique tempore temporibus totam voluptate
    voluptates.
</div>
<div>Amet animi consequuntur, cumque ex exercitationem fugiat illum iure odit praesentium quia quis, similique veniam!
    Accusamus at facere facilis laudantium quas quia quidem, rem ut! Corporis eius explicabo molestias voluptates?
</div>
<div>Aliquam assumenda earum eum expedita, laudantium perspiciatis porro voluptas. Accusamus consequuntur culpa earum
    eligendi, et harum iste iure molestias natus neque nulla porro possimus quia quis recusandae repellat, veritatis
    voluptatibus!
</div>
<div>Alias asperiores assumenda dicta eaque eum facilis harum id illum in inventore maxime optio possimus, quibusdam
    quidem ut! Adipisci alias beatae odio saepe tempora? Deleniti dolore doloribus enim repudiandae tempora!
</div>
<div>Adipisci beatae commodi cupiditate, dolorem, earum explicabo facilis illo maiores minus, odio reprehenderit saepe
    sit voluptatum. Atque autem cum eos incidunt, laborum, minus molestiae pariatur, porro quia similique suscipit
    tempore.
</div>
<div>Atque dolorem hic illum ipsa iusto neque nobis non, obcaecati, porro quia recusandae tenetur! A accusantium atque
    autem consectetur cupiditate eum ex, incidunt laborum minima, mollitia officia perferendis, possimus quae?
</div>
<div>Aliquam aliquid animi consectetur cumque delectus dolor ducimus, ea et excepturi explicabo, facere, hic id ipsa
    laboriosam maiores maxime molestiae nemo non nulla perspiciatis quam quas quod suscipit ut veniam.
</div>
<div>Ab accusamus aliquid delectus, dolor ducimus earum esse est eveniet ex minus molestias nihil numquam officia
    officiis quaerat quam, qui quo rerum saepe sit suscipit tenetur velit, veniam voluptatem voluptatum!
</div>
<div>Ab accusantium aliquid cumque cupiditate dignissimos dolores earum eligendi exercitationem ipsa iusto libero non,
    porro quisquam, reiciendis repudiandae suscipit ut voluptatum. Incidunt officia placeat possimus quisquam quos
    repellendus similique voluptatibus.
</div>
<div>Consequuntur dolore molestiae odit omnis quidem sed velit vitae voluptates! Animi atque cupiditate explicabo minima
    qui? Amet at autem cum earum hic illo libero modi, nam nisi recusandae tempora, totam.
</div>
<div>Ad adipisci, alias aliquid ea eligendi excepturi fugiat in ipsam nemo obcaecati omnis quos repellat reprehenderit
    sit suscipit tenetur voluptatum. Architecto, et explicabo magni obcaecati omnis provident sint suscipit tempora!
</div>
<div>Accusamus aut debitis ea esse qui reprehenderit sunt ullam veniam! Assumenda deleniti deserunt eaque, harum in
    itaque maxime modi nulla obcaecati, odio quaerat quas quibusdam, reiciendis sapiente sunt unde velit.
</div>
<div>Aperiam at aut dignissimos, dolor, esse fuga illo ipsam labore neque odit pariatur quaerat quia quisquam reiciendis
    sed. Accusamus distinctio dolores illum molestiae mollitia nihil, non quos ratione sequi temporibus.
</div>
<div>A ab alias animi atque autem dolorem doloribus eveniet excepturi id illum impedit iste laborum laudantium magni
    nemo neque nisi porro quos, repellendus rerum tempora tempore tenetur totam unde veniam!
</div>
<div>Asperiores iusto molestias, repellendus ullam vel velit? Aspernatur, consequuntur ea ex hic iusto repudiandae
    sapiente soluta voluptatum. Accusantium earum ex fugiat inventore, libero minima nemo optio porro, quasi suscipit
    vitae.
</div>
<div>Debitis dolor enim soluta. Adipisci asperiores dolores dolorum earum error expedita fugiat fugit laborum laudantium
    libero, maxime minima modi mollitia non nulla odio praesentium quaerat saepe sapiente vel! Explicabo, fuga.
</div>
<div>Accusantium autem cupiditate deserunt earum est magni nulla provident, quos tenetur vitae. Adipisci animi
    architecto eligendi eveniet hic sapiente ut? Ad dignissimos dolore nulla quam quos repellendus sequi sit ullam.
</div>
<div>Atque aut consectetur earum fugiat libero, maiores mollitia provident quae. Aut dignissimos dolores fugiat natus
    nulla quo voluptatum. Autem consectetur corporis eaque eveniet harum perspiciatis repudiandae saepe tempora tenetur
    voluptatum.
</div>
<div>Alias aperiam, commodi dolor doloribus excepturi explicabo, harum iusto omnis quibusdam rem tempore tenetur
    veritatis. Animi asperiores dolore doloribus, ex expedita impedit iste laudantium minima molestiae odio quis velit
    vero.
</div>
<div>Maiores nobis nulla, officia sapiente sunt voluptatibus? Accusamus aspernatur beatae cupiditate dolorem ipsum iusto
    laborum nam numquam obcaecati omnis optio provident, quam quas qui quis sed sint velit voluptas voluptate?
</div>
<div>Delectus enim est facere id? Cupiditate doloremque error laboriosam nam odit sunt ut. Ad deleniti dolor modi nobis
    optio sapiente. A ad at dolore molestiae natus nemo officia voluptas. Necessitatibus.
</div>
<div>Animi beatae cum ea et quam quo quos sapiente voluptatem! Amet cupiditate doloremque, eum iste magni quam
    recusandae vero voluptates? Explicabo fuga laudantium nesciunt nostrum quae repellat veritatis! Odit, quam.
</div>
<div>Aliquid asperiores beatae blanditiis culpa ea eligendi explicabo, facere hic illo, illum ipsum labore molestias
    natus numquam obcaecati praesentium quaerat quidem reiciendis repudiandae rerum saepe sequi soluta sunt tenetur
    vero!
</div>
<div>Dolore, hic quod. Accusantium animi consequatur deleniti et illo iusto praesentium quidem quisquam recusandae unde!
    Ad culpa distinctio illo natus, non recusandae reiciendis voluptatum. Aliquid inventore ipsa nobis saepe sequi!
</div>
<div>Accusantium aliquid blanditiis consectetur consequatur corporis delectus dolore doloribus ea expedita explicabo
    facere fuga harum impedit incidunt ipsa magnam, minima mollitia nihil nobis officiis pariatur possimus quia
    similique soluta voluptate.
</div>
<div>Adipisci alias aliquam autem cumque cupiditate delectus dolor ducimus earum excepturi fugit maiores, maxime nam
    necessitatibus officiis perferendis possimus quisquam reprehenderit voluptatem voluptates voluptatum. Atque
    consequatur eligendi ipsum quibusdam sit.
</div>
<div>A adipisci cum ducimus id illo inventore itaque optio provident quis repudiandae. Accusantium adipisci aspernatur
    consequuntur doloribus error hic nesciunt nostrum, pariatur porro possimus quaerat quis repudiandae sequi sunt
    ullam!
</div>
<div>Accusamus aliquid aspernatur atque corporis delectus dolorum enim eveniet, exercitationem fuga fugiat in ipsam
    laborum nihil placeat porro reiciendis, voluptate. Assumenda at numquam officia perspiciatis quidem, sapiente. Est,
    laboriosam, voluptatibus?
</div>
<div>Consequuntur cupiditate iure maxime molestiae obcaecati optio sapiente vel. Accusantium autem dicta ex expedita,
    incidunt laudantium officia quis, repellat repudiandae sit veritatis vitae. Ad dicta id labore nemo nihil,
    voluptatem.
</div>
<div>A doloribus eius eos eum nobis quaerat quasi quidem quod rerum, voluptas? Eveniet laudantium magnam officia totam
    vero. Ad aliquid cumque eaque, enim ex molestias odit provident quos veritatis voluptate.
</div>
<div>Ab ad asperiores aut culpa cupiditate doloribus dolorum, eaque expedita libero pariatur quisquam recusandae,
    reprehenderit temporibus veritatis vero vitae voluptatem. Aperiam blanditiis doloremque, facilis nemo porro quasi
    ratione rem unde.
</div>
<div>Amet autem cumque est incidunt magnam necessitatibus nisi quam sapiente vero voluptatem. Ab, consequatur dolorum
    error harum illo natus nobis possimus quam sit sunt tenetur vitae. Atque dolorum explicabo reiciendis.
</div>
</body>
</html>